Skip to content

feat(ui): tabbed canvases #8553

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Draft
wants to merge 4 commits into
base: main
Choose a base branch
from
Draft

feat(ui): tabbed canvases #8553

wants to merge 4 commits into from
+1,450 −680

Conversation

csehatt741
Copy link
Contributor

@csehatt741 csehatt741 commented Sep 10, 2025 •
edited
Loading

Summary

A new feature was implemented to enable multiple canvases in the canvas editor.

  • SliceConfig was updated in types.js to handle partially undoable slices:
    • new generic parametes, TInternalState and TSerializedState, were added to strongly type states used in Redux and the persisted into storage
    • new functions, wrapState and unwrapState, were added to the migrate field for wrapping/unwrapping state during serialization/deserialization
    • undoableConfig was deleted, as reduxUndoOptions is used only in slices, so this field became redundant
  • store.ts was refactored to use the updated SliceConfig
  • new schemas, zStateWithHistory, zCanvasStateWithHistory, zCanvasesState, zCanvasesStateWithHistory and zCanvasesStateWithoutHistory, were created in types.ts to represent types in the partially undoable canvases slice
  • new selectors, selectCanvases selectSelectedCanvasWithHistory and selectSelectedCanvas, were added to selectors.ts to isolate changes due to refactoring in the canvas slice from components
  • canvasSlice was split into two parts representing the canvases slice without history and the canvas with undoable history
  • undoableCanvasesReducer higher order reducer was created to combine canvases and canvas reducers
  • RTK was updated to version 2.9.0

Related Issues / Discussions

Closes #8380

Checklist

  • The PR has a short but descriptive title, suitable for a changelog
  • Tests added / updated (if applicable)
  • ❗Changes to a redux slice have a corresponding migration
  • Documentation added / updated (if applicable)
  • Updated What's New copy (if doing a release after this PR)

@github-actions github-actions bot added frontend-deps PRs that change frontend dependencies frontend PRs that change frontend files labels Sep 10, 2025
@csehatt741 csehatt741 changed the title feat(ui): canvas slice refactored to support tabbed canvases feat(ui): tabbed canvases Sep 10, 2025
@csehatt741 csehatt741 force-pushed the feat/tabbed-canvases branch 4 times, most recently from 3f40a1b to 1f9019d Compare September 16, 2025 09:07
@csehatt741 csehatt741 force-pushed the feat/tabbed-canvases branch 2 times, most recently from 2b8c8d2 to 03b85da Compare September 23, 2025 10:45
@csehatt741
Copy link
Contributor Author

csehatt741 commented Sep 24, 2025 •
edited
Loading

@psychedelicious, here is the current status of multi-canvas development and refactoring:

  • to limit the scope of refactoring I still kept the notion of the active canvas
    • it always provides scope for any components even not in CanvasInstanceContext, without refactoring the component hierarchy
    • functionality can still be improved further in the future
  • canvasSlice:
    • state is split into per canvas instance state
    • undo/redo per canvas implemented
  • canvasStagingAreaSlice state is split into per canvas instance state
  • canvasSettingsSlice state is split into shared and per canvas instance state

Outstanding tasks:

  • paramsSlice refactoring
    • now it is shared among all the tabs (generate, canvas, upscaling)
    • I expect it should be separated per tabs/canvas instances. Is it a valid idea?
  • inject context related params by dispatchers
  • revise code where selectSelectedCanvas selector is used
    • there might be context that overrides the default selected canvas one
    • functionality might use all the canvases now, eg.: state.getImageUsage

@csehatt741
Copy link
Contributor Author

Since there is always only one canvas rendered, the active one, so the CanvasManager is created and initialized when the canvas is displayed and destroyed when the canvas becomes inactive.
Though, I haven't seen any issues caused by this lifecycle of the CanvasManager yet, but I expect this might lead to problems:

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@psychedelicious psychedelicious Awaiting requested review from psychedelicious psychedelicious will be requested when the pull request is marked ready for review psychedelicious is a code owner

@blessedcoolant blessedcoolant Awaiting requested review from blessedcoolant blessedcoolant will be requested when the pull request is marked ready for review blessedcoolant is a code owner

@maryhipp maryhipp Awaiting requested review from maryhipp maryhipp will be requested when the pull request is marked ready for review maryhipp is a code owner

@hipsterusername hipsterusername Awaiting requested review from hipsterusername hipsterusername will be requested when the pull request is marked ready for review hipsterusername is a code owner

At least 1 approving review is required to merge this pull request.

Assignees
No one assigned
Labels
frontend PRs that change frontend files frontend-deps PRs that change frontend dependencies
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

[enhancement]: Tabbed Canvases
1 participant
@csehatt741